{{ if (and .image .icon) }}
  {{ errorf "card: don't use both image and icon: %s" . }}
{{ end }}
<div class="not-prose overflow-x-hidden drop-shadow bg-white rounded
             border border-gray-light-100 dark:bg-gray-dark-200 dark:border-gray-dark-400
             {{ if .link }}hover:border-gray-light-200 hover:dark:border-gray-dark{{ end }}">
  {{ if .link }}
    <a href="{{ .link }}">
  {{ end }}
    {{ if .image }}
    {{/* use the "tall image" layout */}}
    <div class="flex gap-2 items-stretch">
      <div class="basis-1/3">
        <img class="h-full w-full object-cover" src="{{ .image }}" alt="">
      </div>
      <div class="basis-2/3 flex flex-col gap-2 p-4">
        <div class="text-xl text-gray-light-800 leading-snug dark:text-white flex gap-2">
          {{ markdownify .title }}
        </div>
        <div class="text-gray-light-500 leading-snug dark:text-gray-dark-700">
          {{ .description | markdownify }}
        </div>
      </div>
    </div>
    {{ else }}
    {{/* use the default layout */}}
    <div class="flex flex-col gap-2 p-4">
      <div class="flex gap-4 items-center">
        {{ with .icon }}
          {{ if strings.ContainsAny . "/." }}
          {{/* image file */}}
          <img class="w-[32px] invertible" src="{{ . }}" alt="">
          {{ else }}
          {{/* icon ligature */}}
          <span class="icon-svg">{{ partial "icon" . }}</span>
          {{ end }}
        {{ end }}
        <div>
          <div class="text-xl text-gray-light-800 leading-snug dark:text-white flex items-center gap-2">
            {{ markdownify .title }}
          </div>
        </div>
      </div>
      <div class="text-gray-light-600 leading-snug dark:text-gray-dark-700">
        {{ .description | markdownify }}
      </div>
    </div>
    {{ end }}
  {{ if .link }}
    </a>
  {{ end }}
</div>
